<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
    <script src="assets/date_picker.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="row">
                <div class="col-md-12" style="text-align: center; font-weight: bold; font-size: 18px; height: 80px; line-height: 80px;">
                    {{title}}
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>房间号</label>
                    <select v-model="houseId" class="form-control">
                        <option value="null">请选择</option>
                        <option v-for="h in houseList" :value="h.id">{{h.numbers}}</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>费用类型</label>
                    <select v-model="typeId" class="form-control">
                        <option value="null">请选择</option>
                        <option v-for="t in typeList" :value="t.id">{{t.name}}</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>开始时间</label>
                    <input type="datetime-local" class="form-control" v-model="startDate">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>结束时间</label>
                    <input type="datetime-local" class="form-control" v-model="endDate">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>金额</label>
                    <input type="text" class="form-control" v-model="money"/>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>状态</label>
                    <select class="form-control" v-model="status">
                        <option value="null">请选择</option>
                        <option value="0">已缴费</option>
                        <option value="1">未缴费</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <button class="btn btn-primary" @click="doSave">保存</button>
                    <button class="btn btn-default" @click="doBack">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            //传入网页id
            proId: null,
            //绑定双表集合
            houseList:null,
            typeList:null,
            //页面数据
            title: null,
            houseId: null,
            typeId: null,
            startDate: null,
            endDate: null,
            money: null,
            status: null,
        },
        methods: {
            doSave(){
                if (this.proId == null){ //添加
                    var uid = localStorage.getItem("uid");
                    axios.post("http://localhost:8080/proInfo/add?uid="+uid,{
                        houseId:this.houseId,
                        typeId:this.typeId,
                        startDate:this.startDate,
                        endDate:this.endDate,
                        money:this.money,
                        status:this.status,
                    }).then(response =>{
                        if (response.data.code == 200){
                            window.parent.main_right.location.href="propertyInfo_list.html";
                        }else{
                            alert(response.data.msg)
                        }
                    })
                }else{ //修改
                    var uid = localStorage.getItem("uid");
                    axios.post("http://localhost:8080/proInfo/update?uid="+uid,{
                        id:this.proId,
                        houseId:this.houseId,
                        typeId:this.typeId,
                        startDate:this.startDate,
                        endDate:this.endDate,
                        money:this.money,
                        status:this.status,
                    }).then(response =>{
                        if (response.data.code == 200){
                            window.parent.main_right.location.href="propertyInfo_list.html";
                        }else{
                            alert(response.data.msg)
                        }
                    })
                }
            },
            //请求收费类型列表
            requestTypeList() {
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/proType/list?uid="+uid).then(response =>{
                    console.log(response.data);
                    this.typeList = response.data.data;
                })
            },
            //请求房屋列表
            requestHouseList(){
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/house/list?pageIndex=1&pageSize=100&uid="+uid).then(response =>{
                    console.log(response.data);
                    this.houseList=response.data.data;
                })
            },
            //请求物业收费信息
            requestProInfo(){
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/proInfo/info?id="+this.proId+"&uid="+uid).then(response =>{
                    console.log(response.data);
                    this.houseId=response.data.data.houseId;
                    this.typeId=response.data.data.typeId;
                    this.startDate=response.data.data.startDate;
                    this.endDate=response.data.data.endDate;
                    this.money=response.data.data.money;
                    this.status=response.data.data.status;
                })
            },
            doBack(){
                history.go(-1);
            }
        },
        created: function () {
            this.requestTypeList(); //调用收费类型列表函数
            this.requestHouseList(); //调用房屋列表函数
            var url = window.location.href;
            if (url.indexOf("id") != -1){
                this.proId = url.substring(url.indexOf("=")+1);
            }
            console.log("页码跳转的id:"+this.proId);
            if (this.proId == null){ //添加
                this.title = "添加物业收费"
            }else{
                this.title = "修改物业收费";
                this.requestProInfo(); //调用请求收费信息的函数
            }
        }
    });
</script>
</body>
</html>